<template>
  <div>
    <!--    vue2-->
    <!--    <div>总价：<input v-model="totalPrice"></div>-->
    <!--    <div>数量：<input v-model="amount"></div>-->
    <!--    <div>折扣：<input v-model="discount"></div>-->
    <!--    <div>折扣平均单价<input v-model="avgPrice"></div>-->

    <div>总价：<input v-model="goods.totalPrice"></div>
    <div>数量：<input v-model="goods.amount"></div>
    <div>折扣：<input v-model="goods.discount"></div>
    <div>折扣平均单价<input v-model="avgPrice"></div>
  </div>
</template>

<script setup>
// vue3
import {computed, ref} from 'vue'

const goods = ref({
  totalPrice: 2000,
  amount: 10,
  discount: 8,
})
// 只设置
// const avgPrice = computed(() => {
//   return (goods.value.totalPrice / goods.value.amount * (100 - goods.value.discount)) / 100
// })

// 获取和设置
const avgPrice = computed({
  get() {
    console.log('get')
    return (goods.value.totalPrice / goods.value.amount * (100 - goods.value.discount)) / 100
  },
  set(value) {
    console.log('set')
  }
})
/*// vue2-------------------------------
export default {
  name: "App",
  data() {
    return {
      totalPrice: 2000,
      amount: 10,
      discount: 8,
    }
  },
  computed: {
    avgPrice() {
      return (this.totalPrice / this.amount * (100 - this.discount)) / 100
    }
  }
}*/
</script>

<style scoped>

</style>